-
-
Notifications
You must be signed in to change notification settings - Fork 32
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update Formless to be Halogen 5 compatible #46
Merged
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…sage to Slot' type
Expose Halogen's `input` type
* Fix mixed indentation * Update Row and RowList imports
Closed
* Added Formless component template * Further cleanup template * Fix indentation for template * Fix typo in template example * Template file: convert MonadType to m with MonadAff constraint * Template file: document handleEvent function * Temlate file: document mkInput * Template file: more clearly document getInput and setValidate functions * Use comments to further document template file
I am going to merge this into master now that it looks like many folks are moving over to the Halogen release candidates. However, I'll hold off on a 1.0 release until:
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What does this pull request do?
Closes #45 by updating the library for compatibility with Halogen 5. Along the way I made a number of improvements to the library along the lines of the same improvements made to the Select library in #39.
Where should the reviewer start?
This is a fairly enormous PR. I don't expect diving in to the Formless internals will be fruitful; instead, review the new examples to see how using the component has changed.
How should this be manually tested?
If you have a medium-sized form in production, I would suggest trying to convert it to this new format to ensure the features you have extended via a parent component are still possible with new Formless. There should be no loss in functionality -- anything you could express the old way you can express the new way, and you can now express quite a bit more.
You can also verify that the demo site examples work by building the app (
yarn build-all
) and then openingdist/index.html
.Summary of changes
The component and examples are now Halogen 5 compatible.
Formless is no longer meant to be extended by a parent component. Previously, if you wanted more state available to the form for rendering you would write that state into the parent component and then use the parent state in the render function. If you wanted to support new behaviors you would write a query in the parent component, embed it in the render function with the
Raise
query from Formless, and then handle it when Formless raised anEmit
message containing the query. This caused a lot of pollution: the child component (Formless) mixed its state and queries with a parent component. Now, Formless is extensible. If you want more state available, you extend the Formless state type with new fields. If you want more queries or actions, you extend the Formless query / action types and provide a handler for the new queries / actions.Formless is much more extensible than it was previously. In addition to extending state and queries, as you could previously, you can now extend even more. You can hook in to the
initialize
,finalize
, andreceive
lifecycles if you would like and you can provide your own output messages.Formless now handles its
Message
type differently. Formless still has aMessage
type, but allows you to pass your own handler for these messages. Now you can perform new actions within the Formless component when a message is raised, and then raise you own custom messages as you see fit. The most common thing to do is intercept theSubmitted
message by doing some processing on the output type before raising that output type as the component message. This means a parent component literally only has to handle theRegisteredUser
orValidatedForm
or whatever type it is the form is meant to produce, but you still have the power to hook in to any Formless messages as before.Formless has much better support for child components because of this change. If you want to embed child components in a Formless form, then you can also handle their outputs by extending the Formless
Action
type. That means that Formless can manage these child components for itself without a parent component being aware of them -- the child components are encapsulated. However, with thesendQuery
query, a parent can transparently query through Formless to a child component and receive a result, as if Formless wasn't even there.The README and examples have all been updated. Please see the examples to understand how the component works now. I've got a 'summary of changes' in the works as well.
The Formless component is a little simpler internally. It no longer uses the
Store
comonad to manage state and no longer takes a render function as part of its input type. It takes a new argument, which is aSpec
: thisSpec
type describes any extensions to the component (your extensions to the state, query, action, message, child slots, etc. types) and provides handlers for any extensions that need them (if you added new actions, you need ahandleAction
function; if you added new queries you need ahandleQuery
function, etc). All extensions are optional, and you can simply providedefaultSpec
if you have nothing to add. Usually you will overridedefaultSpec
with at least a render function.To embed your own action in Formless HTML, use the
injAction
function (onClick \_ -> Just $ injAction MyAction
). To use your own query to query Formless, use theinjQuery
function (H.query _formless unit $ injQuery MyQuery
).Other Notes:
Documentation comments and the readme have been updated. However, I'll still need to produce a "changes in the last version" document as part of release notes for people converting Halogen 4 forms to the new version of Formless.